<template>
    <div>
       <div>
          <label for="idcard">身份证:</label>
          <input type="text" v-model="idcard" id="idcard">
          <span>
            <i v-show="idcardErrorFlag" class="iconfont icon-cuowu" style="color:red"></i>
          </span>
       </div>
       <div>
         <label for="birthday">生日:</label>
         <input type="text" v-model="birthday" id="birthday">
       </div>
       <div>
          <label for="gender">性别:</label>
          <input type="radio" name="sex" v-model="gender" value="1">男
          <input type="radio" name="sex" v-model="gender" value="2">女
       </div>
    </div>
</template>

<script>
import {getBirthday} from './utils/dateUtil'
export default {
  data(){
    return{
      idcard:'',
      birthday:'',
      gender:1,
      idcardErrorFlag:false
    }
  },
  watch:{
    idcard(newval){
      let idcardReg=/^[1-9]\d{17}$/
      if(idcardReg.test(newval)){
        this.idcardErrorFlag=false
        const birthday=getBirthday(newval)
        this.birthday=birthday
        const v=newval.slice(16,17)
        if(v%2==0){
          this.gender=2
        }else{
          this.gender=1
        }
      }else{
        this.idcardErrorFlag=true
      }
    }
  }
}
</script>

<style lang="scss">
@import url('./assets/iconfont.scss');
</style>